<template>
	<view class="container">

		<view class="wrapper">
			
			<view class="input-content">
				<view class="welcome">会员登录</view>
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input 
						type="number" 
						:value="mobile" 
						placeholder="请输入手机号码"
						maxlength="11"
						data-key="mobile"
						@input="inputChange"
					/>
				</view>
				<view class="input-item">
					<text class="tit">登录密码</text>
					<input 
						type="mobile" 
						value="" 
						placeholder="请输入登录密码"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						data-key="password"
						@input="inputChange"
						@confirm="toLogin"
					/>
				</view>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
			<navigator url="/pages/simple/forget" class="forget-section">忘记密码?</navigator>
		</view>
		<view class="other_login">
			<view class="text"><span>其它方式登录</span></view>
			<view class="other_icon">
				<view class="weixin"><i class="coolc icon-weixin1"></i></view>
				<view class="qq"><i class="coolc icon-QQ"></i></view>
				<view class="weibo"><i class="coolc icon-weibo"></i></view>
				<view class="alipay"><i class="coolc icon-zhifubao"></i></view>
			</view>
		</view>
		<view class="register-section">
			还没有账号?
			<navigator url="/pages/simple/reg">马上注册</navigator>
		</view>
	</view>
</template>

<script>
	import {  
        mapMutations  
    } from 'vuex';
	
	export default{
		data(){
			return {
				mobile: '',
				password: '',
				logining: false
			}
		},
		onLoad(){
			
		},
		methods: {
			...mapMutations(['login']),
			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			async toLogin(){
				this.logining = true;
				const {mobile, password} = this;

				const sendData = {
					mobile,
					password
				};
				const result = await this.$api.json('userInfo');
				if(result.status === 1){
					this.login(result.data);
                    uni.navigateBack();  
				}else{
					this.$api.msg(result.msg);
					this.logining = false;
				}
			}
		},
	}
</script>

<style lang='scss'>
	page{ background:url('/static/img/bg/login.jpg') no-repeat left top #ffffff; background-size:100% auto; }
	.container{ padding-top:115px; position:relative; width:100vw; height:auto; display:table; }
	
	.other_login {
		width:100%; height:auto; display:table; padding-top:20upx;
		
		.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
		.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; }
		
		.other_icon { 
			width:520upx; height:auto; display:table; padding:40upx 0 0 0; margin:0 auto;
			
			.coolc { font-size:50upx; }
			.weixin { width:100upx; height:100upx; text-align:center; line-height:100upx; margin:15upx; background:#1cab00; color:#ffffff; border-radius:100upx; float:left; }
			.qq { width:100upx; height:100upx; text-align:center; line-height:100upx; margin:15upx; background:#00a2ff; color:#ffffff; border-radius:100upx; float:left; }
			.weibo { width:100upx; height:100upx; text-align:center; line-height:100upx; margin:15upx; background:#e60040; color:#ffffff; border-radius:100upx; float:left; }
			.alipay { width:100upx; height:100upx; text-align:center; line-height:100upx; margin:15upx; background:#185abd; color:#ffffff; border-radius:100upx; float:left; }
		}
	}
	
	.wrapper{
		width:700upx; margin:0 auto;
		position:relative; border-radius:30upx;
		z-index:90;
		background:#fff;
		padding-bottom:40upx;
	}
	.left-top-sign{ font-size:120upx; color:$page-color-base; position:relative; left:-16upx; }
	.right-top-sign{
		position:absolute; top:80upx; right:-30upx; z-index:95;
		
		&:before,&:after{ display:block; content:""; width:400upx; height: 80upx; background:#b4f3e2; }
		&:before{ transform:rotate(50deg); border-radius:0 50px 0 0; }
		&:after{ position:absolute; right:-198upx; top:0; transform:rotate(-50deg); border-radius:50px 0 0 0; }
	}
	.left-bottom-sign{ position:absolute; left:-270upx; bottom:-320upx; border:100upx solid #d0d1fd; border-radius:50%; padding:180upx; }
	.welcome{ width:100%; height:110upx; padding-top:10upx; line-height:100upx; font-size:36upx; font-weight:bold; color:#555; }
	.input-content{ padding:0 50upx; }
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding:0 30upx;
		background:$page-color-light;
		height:120upx;
		border-radius: 4px;
		margin-bottom:30upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height:50upx;
			line-height:56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
		input{
			height:60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}	
	}

	.confirm-btn{ width:600upx; height:76upx; line-height:76upx; border-radius:50px; margin-top:40upx; background:#8c0027; color:#fff; font-size:$font-lg; }
	.forget-section{ font-size:$font-base; color:$font-color-spec; text-align:center; margin-top:20upx; }
	.register-section{
		width:100%; height:120upx; padding-top:30upx; font-size:$font-base; color:$font-color-base; text-align:center;
		navigator{ color:$font-color-spec; margin-left:10upx; display:inline-block; }
	}
</style>
